30 ஆகஸ்ட், 2025தமிழ்

ரியாக்ட்டின் செயல்திறனுக்குப் பின்னால் உள்ள மர்மத்தை அறியுங்கள். இந்த வழிகாட்டி மறுசீரமைப்பு அல்காரிதம், மெய்நிகர் DOM வேறுபாட்டைக் கண்டறிதல் மற்றும் முக்கிய மேம்படுத்தல் உத்திகளை விளக்குகிறது.

ரியாக்ட்டின் ரகசிய சூத்திரம்: மறுசீரமைப்பு அல்காரிதம் மற்றும் மெய்நிகர் DOM வேறுபாட்டைக் கண்டறிதல் பற்றிய ஆழமான பார்வை

நவீன வலை மேம்பாட்டு உலகில், ரியாக்ட் ஆற்றல்மிக்க மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்குவதில் ஒரு முக்கிய சக்தியாக தன்னை நிலைநிறுத்தியுள்ளது. அதன் புகழ் அதன் காம்போனென்ட் அடிப்படையிலான கட்டமைப்பிலிருந்து மட்டுமல்ல, அதன் குறிப்பிடத்தக்க செயல்திறனிலிருந்தும் வருகிறது. ஆனால் ரியாக்ட்டை இவ்வளவு வேகமாக இயக்குவது எது? பதில் மாயாஜாலம் அல்ல; அது மறுசீரமைப்பு அல்காரிதம் (Reconciliation algorithm) எனப்படும் ஒரு அற்புதமான பொறியியல் நுட்பம்.

பல டெவலப்பர்களுக்கு, ரியாக்ட்டின் உள் செயல்பாடுகள் ஒரு புரியாத புதிராகவே இருக்கின்றன. நாம் காம்போனென்ட்களை எழுதுகிறோம், நிலையை (state) நிர்வகிக்கிறோம், மற்றும் பயனர் இடைமுகம் (UI) குறைபாடின்றி புதுப்பிக்கப்படுவதைப் பார்க்கிறோம். இருப்பினும், இந்த தடையற்ற செயல்முறைக்குப் பின்னால் உள்ள வழிமுறைகளைப் புரிந்துகொள்வது, குறிப்பாக மெய்நிகர் DOM மற்றும் அதன் வேறுபாட்டைக் கண்டறியும் அல்காரிதம், ஒரு நல்ல ரியாக்ட் டெவலப்பரை ஒரு சிறந்த டெவலப்பரிடமிருந்து வேறுபடுத்துகிறது. இந்த ஆழமான அறிவு, உயர் செயல்திறன் கொண்ட பயன்பாடுகளை எழுதவும், செயல்திறன் சிக்கல்களை சரிசெய்யவும், மற்றும் இந்த லைப்ரரியை உண்மையாக தேர்ச்சி பெறவும் உங்களுக்கு அதிகாரம் அளிக்கிறது.

இந்த விரிவான வழிகாட்டி ரியாக்ட்டின் முக்கிய ரெண்டரிங் செயல்முறையை எளிமையாக விளக்கும். நேரடி DOM கையாளுதல் ஏன் செலவு மிக்கது, மெய்நிகர் DOM எவ்வாறு ஒரு நேர்த்தியான தீர்வை வழங்குகிறது, மற்றும் மறுசீரமைப்பு அல்காரிதம் உங்கள் UI-ஐ எவ்வாறு திறமையாக புதுப்பிக்கிறது என்பதை நாம் ஆராய்வோம். அசல் ஸ்டேக் ரீகன்சைலரிலிருந்து நவீன ஃபைபர் கட்டமைப்பு வரையிலான பரிணாம வளர்ச்சியையும் நாம் காண்போம், மேலும் உங்கள் சொந்த பயன்பாடுகளை மேம்படுத்த நீங்கள் இன்று செயல்படுத்தக்கூடிய நடைமுறை உத்திகளுடன் முடிப்போம்.

முக்கிய சிக்கல்: நேரடி DOM கையாளுதல் ஏன் திறனற்றது

ரியாக்ட்டின் தீர்வைப் பாராட்ட, அது தீர்க்கும் சிக்கலை முதலில் நாம் புரிந்து கொள்ள வேண்டும். ஆவண பொருள் மாதிரி (DOM) என்பது HTML ஆவணங்களைக் குறிப்பதற்கும் ஊடாடுவதற்கும் ஒரு பிரவுசர் API ஆகும். இது ஒரு மரத்தைப் போன்ற பொருட்களின் கட்டமைப்பாக உள்ளது, இதில் ஒவ்வொரு முனையும் (node) ஆவணத்தின் ஒரு பகுதியைக் குறிக்கிறது (உறுப்பு, உரை, அல்லது பண்புக்கூறு போன்றவை).

திரையில் உள்ளதை மாற்ற விரும்பும்போது, நீங்கள் இந்த DOM மரத்தைக் கையாளுகிறீர்கள். உதாரணமாக, ஒரு புதிய பட்டியல் உருப்படியைச் சேர்க்க, நீங்கள் ஒரு புதிய `

` உறுப்பை உருவாக்கி அதை ஒரு `

லேஅவுட் மற்றும் ரிஃப்ளோ (Layout and Reflow): ஒரு உறுப்பின் வடிவவியலை (அதன் அகலம், உயரம், அல்லது நிலை போன்றவை) நீங்கள் மாற்றும்போதெல்லாம், பிரவுசர் பாதிக்கப்பட்ட அனைத்து கூறுகளின் நிலைகளையும் பரிமாணங்களையும் மீண்டும் கணக்கிட வேண்டும். இந்த செயல்முறை "ரிஃப்ளோ" அல்லது "லேஅவுட்" என்று அழைக்கப்படுகிறது, மேலும் இது முழு ஆவணம் முழுவதும் பரவி, குறிப்பிடத்தக்க செயலாக்க சக்தியைப் பயன்படுத்தக்கூடும்.
ரீபெயின்டிங் (Repainting): ஒரு ரிஃப்ளோவிற்குப் பிறகு, பிரவுசர் புதுப்பிக்கப்பட்ட கூறுகளுக்கு திரையில் பிக்சல்களை மீண்டும் வரைய வேண்டும். இது "ரீபெயின்டிங்" அல்லது "ராஸ்டரைசிங்" என்று அழைக்கப்படுகிறது. பின்னணி நிறம் போன்ற எளிய ஒன்றை மாற்றுவது ஒரு ரீபெயின்டை மட்டுமே தூண்டக்கூடும், ஆனால் ஒரு லேஅவுட் மாற்றம் எப்போதும் ஒரு ரீபெயின்டைத் தூண்டும்.
ஒத்திசைவான மற்றும் தடுக்கும் (Synchronous and Blocking): DOM செயல்பாடுகள் ஒத்திசைவானவை. உங்கள் ஜாவாஸ்கிரிப்ட் குறியீடு DOM-ஐ மாற்றும்போது, பிரவுசர் பயனர் உள்ளீட்டிற்கு பதிலளிப்பது உட்பட பிற பணிகளை இடைநிறுத்தி, ரிஃப்ளோ மற்றும் ரீபெயின்டைச் செய்ய வேண்டியிருக்கும், இது மந்தமான அல்லது உறைந்த பயனர் இடைமுகத்திற்கு வழிவகுக்கும்.

ஆயிரக்கணக்கான முனைகளைக் கொண்ட ஒரு சிக்கலான பயன்பாட்டை கற்பனை செய்து பாருங்கள். நீங்கள் நிலையைப் புதுப்பித்து, முழு UI-ஐயும் நேரடியாக DOM-ஐ கையாளுவதன் மூலம் மீண்டும் ரெண்டர் செய்தால், நீங்கள் பிரவுசரை விலை உயர்ந்த ரிஃப்ளோக்கள் மற்றும் ரீபெயின்ட்களின் தொடர்ச்சியான சுழற்சிக்குத் தள்ளுவீர்கள், இது ஒரு மோசமான பயனர் அனுபவத்தை ஏற்படுத்தும்.

தீர்வு: மெய்நிகர் DOM (VDOM)

ரியாக்ட்டை உருவாக்கியவர்கள் நேரடி DOM கையாளுதலின் செயல்திறன் தடையை உணர்ந்தனர். அவர்களின் தீர்வு ஒரு சுருக்க அடுக்கை அறிமுகப்படுத்துவதாகும்: அதுதான் மெய்நிகர் DOM.

மெய்நிகர் DOM என்றால் என்ன?

மெய்நிகர் DOM என்பது உண்மையான DOM-இன் ஒரு இலகுவான, நினைவகத்தில் உள்ள பிரதிநிதித்துவம் ஆகும். இது அடிப்படையில் UI-ஐ விவரிக்கும் ஒரு எளிய ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் ஆகும். ஒரு VDOM ஆப்ஜெக்ட் உண்மையான DOM உறுப்பின் பண்புகளைப் பிரதிபலிக்கும் பண்புகளைக் கொண்டுள்ளது. உதாரணமாக, ஒரு எளிய `

` இதுபோன்று குறிப்பிடப்படலாம்:

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

இவை வெறும் ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட்களாக இருப்பதால், அவற்றை உருவாக்குவதும் கையாளுவதும் நம்பமுடியாத அளவிற்கு வேகமாக உள்ளது. இது பிரவுசர் API-களுடன் எந்த தொடர்பையும் கொண்டிருக்கவில்லை, எனவே ரிஃப்ளோக்கள் அல்லது ரீபெயின்ட்கள் இல்லை.

மெய்நிகர் DOM எவ்வாறு செயல்படுகிறது?

VDOM ஒரு அறிவிப்பு அணுகுமுறையை (declarative approach) UI மேம்பாட்டிற்கு வழங்குகிறது. பிரவுசருக்கு DOM-ஐ படிப்படியாக எப்படி மாற்றுவது என்று சொல்வதற்குப் பதிலாக (imperative), ஒரு குறிப்பிட்ட நிலைக்கு UI என்னவாக இருக்க வேண்டும் என்பதை நீங்கள் வெறுமனே அறிவிக்கிறீர்கள் (declarative). மீதமுள்ளதை ரியாக்ட் கவனித்துக் கொள்கிறது.

செயல்முறை இதுபோன்று இருக்கும்:

ஆரம்ப ரெண்டர்: உங்கள் பயன்பாடு முதலில் ஏற்றப்படும்போது, ரியாக்ட் உங்கள் UI-க்கு ஒரு முழுமையான மெய்நிகர் DOM மரத்தை உருவாக்கி, அதைப் பயன்படுத்தி ஆரம்ப உண்மையான DOM-ஐ உருவாக்குகிறது.
நிலை புதுப்பிப்பு: பயன்பாட்டின் நிலை மாறும்போது (எ.கா., ஒரு பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும்போது), ரியாக்ட் புதிய நிலையைப் பிரதிபலிக்கும் ஒரு புதிய மெய்நிகர் DOM மரத்தை உருவாக்குகிறது.
வேறுபாட்டைக் கண்டறிதல் (Diffing): ரியாக்ட் இப்போது நினைவகத்தில் இரண்டு மெய்நிகர் DOM மரங்களைக் கொண்டுள்ளது: பழையது (நிலை மாற்றத்திற்கு முன்) மற்றும் புதியது. பின்னர் அது அதன் "வேறுபாட்டைக் கண்டறியும்" அல்காரிதத்தை இயக்கி, இந்த இரண்டு மரங்களையும் ஒப்பிட்டு சரியான வேறுபாடுகளைக் கண்டறிகிறது.
தொகுத்தல் மற்றும் புதுப்பித்தல்: உண்மையான DOM-ஐ புதிய மெய்நிகர் DOM-உடன் பொருத்தத் தேவையான மிகவும் திறமையான மற்றும் குறைந்தபட்ச செயல்பாடுகளை ரியாக்ட் கணக்கிடுகிறது. இந்த செயல்பாடுகள் ஒன்றாகத் தொகுக்கப்பட்டு, ஒரே, மேம்படுத்தப்பட்ட வரிசையில் உண்மையான DOM-இல் பயன்படுத்தப்படுகின்றன.

புதுப்பிப்புகளைத் தொகுப்பதன் மூலம், ரியாக்ட் மெதுவான DOM-உடனான நேரடி தொடர்பைக் குறைக்கிறது, இது செயல்திறனை கணிசமாக மேம்படுத்துகிறது. இந்தத் திறனின் மையமானது "வேறுபாட்டைக் கண்டறிதல்" படியில் உள்ளது, இது முறையாக மறுசீரமைப்பு அல்காரிதம் என்று அழைக்கப்படுகிறது.

ரியாக்ட்டின் இதயம்: மறுசீரமைப்பு அல்காரிதம்

மறுசீரமைப்பு என்பது ரியாக்ட் DOM-ஐ சமீபத்திய காம்போனென்ட் மரத்துடன் பொருத்தமாக புதுப்பிக்கும் செயல்முறையாகும். இந்த ஒப்பீட்டைச் செய்யும் அல்காரிதத்தை நாம் "வேறுபாட்டைக் கண்டறியும் அல்காரிதம்" என்று அழைக்கிறோம்.

கோட்பாட்டளவில், ஒரு மரத்தை மற்றொன்றாக மாற்றுவதற்கான குறைந்தபட்ச மாற்றங்களின் எண்ணிக்கையைக் கண்டறிவது மிகவும் சிக்கலான ஒரு பிரச்சனையாகும், இதன் அல்காரிதம் சிக்கலானது O(n³) வரிசையில் இருக்கும், இங்கு n என்பது மரத்தில் உள்ள முனைகளின் எண்ணிக்கை. இது நிஜ உலகப் பயன்பாடுகளுக்கு மிகவும் மெதுவாக இருக்கும். இதைத் தீர்க்க, ரியாக்ட் குழு வலைப் பயன்பாடுகள் பொதுவாக எவ்வாறு செயல்படுகின்றன என்பது பற்றிய சில புத்திசாலித்தனமான அவதானிப்புகளைச் செய்து, O(n) நேரத்தில் செயல்படும் ஒரு வேகமான ஹியூரிஸ்டிக் அல்காரிதத்தை செயல்படுத்தியது.

ஹியூரிஸ்டிக்ஸ்: வேறுபாட்டைக் கண்டறிவதை வேகமாகவும் கணிக்கக்கூடியதாகவும் மாற்றுதல்

ரியாக்ட்டின் வேறுபாட்டைக் கண்டறியும் அல்காரிதம் இரண்டு முதன்மை அனுமானங்கள் அல்லது ஹியூரிஸ்டிக்ஸ் மீது கட்டமைக்கப்பட்டுள்ளது:

ஹியூரிஸ்டிக் 1: வெவ்வேறு உறுப்பு வகைகள் வெவ்வேறு மரங்களை உருவாக்குகின்றன

இது முதல் மற்றும் மிகவும் நேரடியான விதி. இரண்டு VDOM முனைகளை ஒப்பிடும்போது, ரியாக்ட் முதலில் அவற்றின் வகையைப் பார்க்கிறது. ரூட் உறுப்புகளின் வகை வேறுபட்டால், ரியாக்ட் டெவலப்பர் ஒன்றை மற்றொன்றாக மாற்ற முயற்சிக்க விரும்பவில்லை என்று கருதுகிறது. அதற்கு பதிலாக, இது ஒரு கடுமையான ஆனால் கணிக்கக்கூடிய அணுகுமுறையை எடுக்கிறது:

இது முழு பழைய மரத்தையும் தகர்த்து, அனைத்து பழைய காம்போனென்ட்களையும் அன்மவுண்ட் செய்து அவற்றின் நிலையை அழிக்கிறது.
இது புதிய உறுப்பு வகையின் அடிப்படையில் முற்றிலும் புதிய மரத்தை புதிதாக உருவாக்குகிறது.

உதாரணமாக, இந்த மாற்றத்தைக் கவனியுங்கள்:

முன்பு: <div><Counter /></div>
பிறகு: <span><Counter /></span>

குழந்தை `Counter` காம்போனென்ட் ஒன்றாக இருந்தாலும், ரியாக்ட் ரூட் `div`-லிருந்து `span`-ஆக மாறியிருப்பதைக் காண்கிறது. இது பழைய `div`-ஐயும் அதற்குள் உள்ள `Counter` நிகழ்வையும் (அதன் நிலையை இழந்து) முழுமையாக அன்மவுண்ட் செய்து, பின்னர் ஒரு புதிய `span` மற்றும் `Counter`-இன் ஒரு புத்தம் புதிய நிகழ்வை மவுண்ட் செய்யும்.

முக்கிய குறிப்பு: ஒரு காம்போனென்ட் துணை மரத்தின் நிலையைப் பாதுகாக்க அல்லது அந்த துணை மரத்தின் முழுமையான மறு-ரெண்டரைத் தவிர்க்க விரும்பினால், அதன் ரூட் உறுப்பு வகையை மாற்றுவதைத் தவிர்க்கவும்.

ஹியூரிஸ்டிக் 2: டெவலப்பர்கள் `key` ப்ராப் மூலம் நிலையான கூறுகளைக் குறிக்கலாம்

இது டெவலப்பர்கள் சரியாகப் புரிந்துகொண்டு பயன்படுத்த வேண்டிய மிக முக்கியமான ஹியூரிஸ்டிக் ஆகும். ரியாக்ட் குழந்தை உறுப்புகளின் பட்டியலை ஒப்பிடும்போது, அதன் இயல்புநிலை நடத்தை இரண்டு பட்டியல்களையும் ஒரே நேரத்தில் மீண்டும் மீண்டும் சரிபார்த்து, எங்கெல்லாம் வேறுபாடு இருக்கிறதோ அங்கெல்லாம் ஒரு மாற்றத்தை உருவாக்குவதாகும்.

இன்டெக்ஸ் அடிப்படையிலான வேறுபாட்டைக் கண்டறிவதில் உள்ள சிக்கல்

நம்மிடம் பொருட்களின் பட்டியல் இருப்பதாக கற்பனை செய்து கொள்வோம், மேலும் கீகளைப் பயன்படுத்தாமல் பட்டியலின் ஆரம்பத்தில் ஒரு புதிய பொருளைச் சேர்க்கிறோம்.

ஆரம்ப பட்டியல்:

உருப்படி B
உருப்படி C

புதுப்பிக்கப்பட்ட பட்டியல் ('உருப்படி A' ஐ ஆரம்பத்தில் சேர்க்கவும்):

உருப்படி A
உருப்படி B
உருப்படி C

கீகள் இல்லாமல், ரியாக்ட் ஒரு எளிய, இன்டெக்ஸ் அடிப்படையிலான ஒப்பீட்டைச் செய்கிறது:

இது இன்டெக்ஸ் 0-இல் உள்ள பழைய உருப்படியை ('உருப்படி B') இன்டெக்ஸ் 0-இல் உள்ள புதிய உருப்படியுடன் ('உருப்படி A') ஒப்பிடுகிறது. அவை வேறுபட்டவை, எனவே இது முதல் உருப்படியை மாற்றுகிறது.
இது இன்டெக்ஸ் 1-இல் உள்ள பழைய உருப்படியை ('உருப்படி C') இன்டெக்ஸ் 1-இல் உள்ள புதிய உருப்படியுடன் ('உருப்படி B') ஒப்பிடுகிறது. அவை வேறுபட்டவை, எனவே இது இரண்டாவது உருப்படியை மாற்றுகிறது.
இது இன்டெக்ஸ் 2-இல் ஒரு புதிய உருப்படி ('உருப்படி C') இருப்பதைக் கண்டு அதைச் செருகுகிறது.

இது மிகவும் திறனற்றது. ரியாக்ட் இரண்டு தேவையற்ற மாற்றங்களையும் ஒரு செருகலையும் செய்துள்ளது, உண்மையில் தேவையானது ஆரம்பத்தில் ஒரு ஒற்றைச் செருகல் மட்டுமே. இந்த பட்டியல் உருப்படிகள் அவற்றின் சொந்த நிலையுடன் கூடிய சிக்கலான காம்போனென்ட்களாக இருந்தால், இது கடுமையான செயல்திறன் சிக்கல்களுக்கும் பிழைகளுக்கும் வழிவகுக்கும், ஏனெனில் நிலை காம்போனென்ட்களுக்கு இடையில் குழப்பமடையக்கூடும்.

`key` ப்ராப்பின் சக்தி

`key` ப்ராப் ஒரு தீர்வை வழங்குகிறது. இது நீங்கள் உறுப்புகளின் பட்டியல்களை உருவாக்கும்போது சேர்க்க வேண்டிய ஒரு சிறப்பு ஸ்டிரிங் பண்புக்கூறு ஆகும். கீகள் ரியாக்ட்டிற்கு ஒவ்வொரு உறுப்பிற்கும் ஒரு நிலையான அடையாளத்தை அளிக்கின்றன.

அதே உதாரணத்தை மீண்டும் பார்ப்போம், ஆனால் இந்த முறை நிலையான, தனித்துவமான கீகளுடன்:

ஆரம்ப பட்டியல்:

உருப்படி B
உருப்படி C

புதுப்பிக்கப்பட்ட பட்டியல்:

உருப்படி A
உருப்படி B
உருப்படி C

இப்போது, ரியாக்ட்டின் வேறுபாட்டைக் கண்டறியும் செயல்முறை மிகவும் புத்திசாலித்தனமானது:

ரியாக்ட் புதிய பட்டியலின் குழந்தைகளைப் பார்த்து 'b' மற்றும் 'c' கீகளுடன் கூடிய உறுப்புகளைக் காண்கிறது.
'b' மற்றும் 'c' கீகளுடன் கூடிய உறுப்புகள் ஏற்கனவே பழைய பட்டியலில் இருப்பதை அது அறிந்திருக்கிறது, எனவே அது அவற்றை வெறுமனே நகர்த்துகிறது.
'a' என்ற கீயுடன் ஒரு புதிய உறுப்பு இருப்பதையும், அது முன்பு இல்லை என்பதையும் அது காண்கிறது, எனவே அதை உருவாக்கிச் செருகுகிறது.

இது மிகவும் திறமையானது. ரியாக்ட் ஒரே ஒரு செருகலை மட்டுமே செய்ய வேண்டும் என்பதை சரியாக அடையாளம் காண்கிறது. 'b' மற்றும் 'c' கீகளுடன் தொடர்புடைய காம்போனென்ட்கள் பாதுகாக்கப்படுகின்றன, அவற்றின் உள் நிலையை பராமரிக்கின்றன.

கீகளுக்கான முக்கிய விதி: கீகள் அவற்றின் உடன்பிறப்புகளுக்கு மத்தியில் நிலையானதாகவும், கணிக்கக்கூடியதாகவும், தனித்துவமானதாகவும் இருக்க வேண்டும். வரிசை இன்டெக்ஸை ஒரு கீயாகப் பயன்படுத்துவது (`items.map((item, index) =>

...

)`) ஒரு மோசமான நடைமுறையாகும், பட்டியல் எப்போதாவது மறுவரிசைப்படுத்தப்பட்டால், வடிகட்டப்பட்டால், அல்லது நடுவிலிருந்து உருப்படிகள் சேர்க்கப்பட்டால்/நீக்கப்பட்டால், ஏனெனில் இது கீ இல்லாத அதே பிரச்சனைகளுக்கு வழிவகுக்கிறது. சிறந்த கீகள் உங்கள் தரவிலிருந்து வரும் தனித்துவமான அடையாளங்காட்டிகள், ஒரு தரவுத்தள ஐடி போன்றவை.

பரிணாமம்: ஸ்டேக்கிலிருந்து ஃபைபர் கட்டமைப்பு வரை

மேலே விவரிக்கப்பட்ட மறுசீரமைப்பு அல்காரிதம் பல ஆண்டுகளாக ரியாக்ட்டின் அடித்தளமாக இருந்தது. இருப்பினும், அதற்கு ஒரு பெரிய வரம்பு இருந்தது: அது ஒத்திசைவானது மற்றும் தடுக்கும் தன்மையுடையது. இந்த அசல் செயலாக்கம் இப்போது ஸ்டேக் ரீகன்சைலர் (Stack Reconciler) என்று குறிப்பிடப்படுகிறது.

பழைய முறை: ஸ்டேக் ரீகன்சைலர்

ஸ்டேக் ரீகன்சைலரில், ஒரு ஸ்டேட் அப்டேட் ஒரு மறு-ரெண்டரைத் தூண்டும்போது, ரியாக்ட் முழு காம்போனென்ட் மரத்தையும் மீண்டும் மீண்டும் கடந்து, மாற்றங்களைக் கணக்கிட்டு, அவற்றை DOM-இல் பயன்படுத்தும்—அனைத்தும் ஒரே, தடையற்ற வரிசையில். சிறிய புதுப்பிப்புகளுக்கு, இது நன்றாக இருந்தது. ஆனால் பெரிய காம்போனென்ட் மரங்களுக்கு, இந்த செயல்முறை கணிசமான நேரத்தை எடுக்கலாம் (எ.கா., 16ms-க்கு மேல்), இது பிரவுசரின் பிரதான திரியைத் தடுக்கும். இது UI-ஐ பதிலளிக்காததாக மாற்றும், இது பிரேம்கள் கைவிடப்படுதல், தடுமாறும் அனிமேஷன்கள் மற்றும் ஒரு மோசமான பயனர் அனுபவத்திற்கு வழிவகுக்கும்.

ரியாக்ட் ஃபைபர் அறிமுகம் (ரியாக்ட் 16+)

இந்தச் சிக்கலைத் தீர்க்க, ரியாக்ட் குழு பல ஆண்டு திட்டத்தை மேற்கொண்டு முக்கிய மறுசீரமைப்பு அல்காரிதத்தை முழுமையாக மீண்டும் எழுதியது. ரியாக்ட் 16-இல் வெளியிடப்பட்ட இதன் விளைவு, ரியாக்ட் ஃபைபர் என்று அழைக்கப்படுகிறது.

ஃபைபர் கட்டமைப்பு கான்்கரன்சியை (concurrency) செயல்படுத்துவதற்காக அடிப்படையிலிருந்து வடிவமைக்கப்பட்டது—ரியாக்ட் ஒரே நேரத்தில் பல பணிகளில் வேலை செய்யும் மற்றும் முன்னுரிமையின் அடிப்படையில் அவற்றுக்கிடையில் மாறும் திறன்.

ஒரு "ஃபைபர்" என்பது ஒரு எளிய ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் ஆகும், இது ஒரு வேலை அலகு ஆகும். இது ஒரு காம்போனென்ட், அதன் உள்ளீடு (props), மற்றும் அதன் வெளியீடு (children) பற்றிய தகவல்களைக் கொண்டுள்ளது. குறுக்கிட முடியாத ஒரு மறுசுழற்சி பயணத்திற்குப் பதிலாக, ரியாக்ட் இப்போது ஃபைபர் முனைகளின் இணைக்கப்பட்ட பட்டியலை ஒன்றன் பின் ஒன்றாக செயலாக்குகிறது.

இந்த புதிய கட்டமைப்பு பல முக்கிய திறன்களைத் திறந்தது:

படிப்படியான ரெண்டரிங் (Incremental Rendering): இது ரெண்டரிங் வேலையை சிறிய துண்டுகளாகப் பிரித்து பல பிரேம்களில் பரப்ப முடியும்.
முன்னுரிமைப்படுத்தல் (Prioritization): இது வெவ்வேறு வகையான புதுப்பிப்புகளுக்கு வெவ்வேறு முன்னுரிமை நிலைகளை ஒதுக்க முடியும். உதாரணமாக, ஒரு பயனர் ஒரு உள்ளீட்டுப் புலத்தில் தட்டச்சு செய்வது பின்னணியில் தரவு பெறப்படுவதை விட அதிக முன்னுரிமை கொண்டது.
இடைநிறுத்தம் மற்றும் ரத்து செய்தல் (Pausability and Abortability): இது ஒரு உயர் முன்னுரிமைப் பணியைக் கையாள குறைந்த முன்னுரிமைப் பணியை இடைநிறுத்த முடியும், மேலும் இனி தேவைப்படாத வேலையை ரத்து செய்யவோ அல்லது மீண்டும் பயன்படுத்தவோ முடியும்.

ஃபைபரின் இரண்டு கட்டங்கள்

ஃபைபரின் கீழ், ரெண்டரிங் செயல்முறை இரண்டு தனித்துவமான கட்டங்களாகப் பிரிக்கப்பட்டுள்ளது:

ரெண்டர்/மறுசீரமைப்பு கட்டம் (Render/Reconciliation Phase) (ஒத்திசைவற்றது): இந்தக் கட்டத்தில், ரியாக்ட் "வேலை-நடப்பில்-உள்ளது" (work-in-progress) மரத்தை உருவாக்க ஃபைபர் முனைகளைச் செயலாக்குகிறது. இது காம்போனென்ட் `render` முறைகளை அழைத்து, DOM-இல் என்ன மாற்றங்கள் செய்யப்பட வேண்டும் என்பதைத் தீர்மானிக்க வேறுபாட்டைக் கண்டறியும் அல்காரிதத்தை இயக்குகிறது. முக்கியமாக, இந்தக் கட்டம் குறுக்கிடக்கூடியது. ரியாக்ட் இந்த வேலையை மேலும் முக்கியமான ஒன்றைக் கையாள இடைநிறுத்தி, பின்னர் அதை மீண்டும் தொடரலாம். இது குறுக்கிடப்படலாம் என்பதால், சீரற்ற UI நிலையைத் தவிர்க்க ரியாக்ட் இந்தக் கட்டத்தில் எந்த உண்மையான DOM மாற்றங்களையும் பயன்படுத்தாது.
கமிட் கட்டம் (Commit Phase) (ஒத்திசைவானது): வேலை-நடப்பில்-உள்ளது மரம் முடிந்தவுடன், ரியாக்ட் கமிட் கட்டத்திற்குள் நுழைகிறது. இது கணக்கிடப்பட்ட மாற்றங்களை எடுத்து உண்மையான DOM-இல் பயன்படுத்துகிறது. இந்தக் கட்டம் ஒத்திசைவானது மற்றும் குறுக்கிட முடியாது. இது பயனர் எப்போதும் ஒரு சீரான UI-ஐப் பார்ப்பதை உறுதி செய்கிறது. `componentDidMount` மற்றும் `componentDidUpdate` போன்ற வாழ்க்கைச் சுழற்சி முறைகள், அத்துடன் `useLayoutEffect` மற்றும் `useEffect` ஹூக்குகள் இந்தக் கட்டத்தில் செயல்படுத்தப்படுகின்றன.

ஃபைபர் கட்டமைப்பு ரியாக்ட்டின் பல நவீன அம்சங்களான `Suspense`, கான்்கரன்ட் ரெண்டரிங், `useTransition`, மற்றும் `useDeferredValue` ஆகியவற்றிற்கு அடித்தளமாக உள்ளது, இவை அனைத்தும் டெவலப்பர்கள் மேலும் பதிலளிக்கக்கூடிய மற்றும் மென்மையான பயனர் இடைமுகங்களை உருவாக்க உதவுகின்றன.

டெவலப்பர்களுக்கான நடைமுறை மேம்படுத்தல் உத்திகள்

ரியாக்ட்டின் மறுசீரமைப்பு செயல்முறையைப் புரிந்துகொள்வது உங்களுக்கு அதிக செயல்திறன் கொண்ட குறியீட்டை எழுத சக்தியை அளிக்கிறது. இங்கே சில நடைமுறை உத்திகள்:

1. பட்டியல்களுக்கு எப்போதும் நிலையான மற்றும் தனித்துவமான கீகளைப் பயன்படுத்துங்கள்

இதை எவ்வளவு வலியுறுத்தினாலும் போதாது. இது பட்டியல்களுக்கான மிக முக்கியமான ஒற்றை மேம்படுத்தல் ஆகும். உங்கள் தரவிலிருந்து ஒரு தனித்துவமான ஐடியைப் பயன்படுத்தவும் (எ.கா., `product.id`). பட்டியல் முற்றிலும் நிலையானது மற்றும் ஒருபோதும் மாறாது என்றால் தவிர, வரிசை இன்டெக்ஸைப் பயன்படுத்துவதைத் தவிர்க்கவும்.

2. தேவையற்ற ரீ-ரெண்டர்களைத் தவிர்க்கவும்

ஒரு காம்போனென்ட் அதன் ஸ்டேட் மாறினால் அல்லது அதன் பெற்றோர் ரீ-ரெண்டர் ஆனால் ரீ-ரெண்டர் ஆகும். சில நேரங்களில், ஒரு காம்போனென்ட் அதன் வெளியீடு ஒரே மாதிரியாக இருந்தாலும் கூட ரீ-ரெண்டர் ஆகும். இதைத் தடுக்க நீங்கள் பயன்படுத்தலாம்:

`React.memo()`: ஃபங்ஷன் காம்போனென்ட்களுக்கான ஒரு உயர்-வரிசை காம்போனென்ட். இது காம்போனென்ட்டின் ப்ராப்ஸ்களின் ஒரு மேலோட்டமான ஒப்பீட்டைச் செய்கிறது. ப்ராப்ஸ்கள் மாறவில்லை என்றால், ரியாக்ட் காம்போனென்டை ரீ-ரெண்டர் செய்வதைத் தவிர்த்து, கடைசியாக ரெண்டர் செய்யப்பட்ட முடிவை மீண்டும் பயன்படுத்தும்.
`useCallback()`: ஒரு காம்போனென்ட்டிற்குள் வரையறுக்கப்பட்ட ஃபங்ஷன்கள் ஒவ்வொரு ரெண்டரிலும் மீண்டும் உருவாக்கப்படுகின்றன. நீங்கள் இந்த ஃபங்ஷன்களை `React.memo`-வில் சுற்றப்பட்ட ஒரு குழந்தை காம்போனென்ட்டிற்கு ப்ராப்ஸாக அனுப்பினால், ஃபங்ஷன் ப்ராப் தொழில்நுட்ப ரீதியாக ஒவ்வொரு முறையும் ஒரு புதிய ஃபங்ஷன் என்பதால் குழந்தை ரீ-ரெண்டர் ஆகும். `useCallback` ஃபங்ஷனையே மெமோயிஸ் செய்கிறது, அதன் சார்புகள் மாறினால் மட்டுமே அது மீண்டும் உருவாக்கப்படுவதை உறுதி செய்கிறது.
`useMemo()`: `useCallback`-ஐப் போன்றது, ஆனால் மதிப்புகளுக்கு. இது ஒரு விலை உயர்ந்த கணக்கீட்டின் முடிவை மெமோயிஸ் செய்கிறது. அதன் சார்புகளில் ஒன்று மாறியிருந்தால் மட்டுமே கணக்கீடு மீண்டும் இயக்கப்படும். இது ஒவ்வொரு ரெண்டரிலும் விலை உயர்ந்த கணக்கீடுகளைத் தடுப்பதற்கும், ப்ராப்ஸாக அனுப்பப்பட்ட நிலையான ஆப்ஜெக்ட்/வரிசை குறிப்புகளைப் பராமரிப்பதற்கும் பயனுள்ளதாக இருக்கும்.

3. புத்திசாலித்தனமான காம்போனென்ட் கலவை

உங்கள் காம்போனென்ட்களை நீங்கள் கட்டமைக்கும் விதம் செயல்திறனில் குறிப்பிடத்தக்க தாக்கத்தை ஏற்படுத்தும். உங்கள் காம்போனென்ட்டின் ஒரு பகுதி நிலை அடிக்கடி புதுப்பிக்கப்பட்டால், அதை மாறாத பகுதிகளிலிருந்து தனிமைப்படுத்த முயற்சிக்கவும்.

உதாரணமாக, ஒரு பெரிய காம்போனென்ட்டில் அடிக்கடி மாறும் உள்ளீட்டுப் புலம் முழு காம்போனென்ட்டையும் ரீ-ரெண்டர் செய்ய வைப்பதற்குப் பதிலாக, அந்த நிலையை அதன் சொந்த சிறிய காம்போனென்ட்டிற்கு உயர்த்தவும். இந்த வழியில், பயனர் தட்டச்சு செய்யும்போது சிறிய காம்போனென்ட் மட்டுமே ரீ-ரெண்டர் ஆகும்.

4. நீண்ட பட்டியல்களை மெய்நிகராக்குங்கள்

நீங்கள் நூற்றுக்கணக்கான அல்லது ஆயிரக்கணக்கான உருப்படிகளைக் கொண்ட பட்டியல்களை ரெண்டர் செய்ய வேண்டியிருந்தால், சரியான கீகளுடன் கூட, அவை அனைத்தையும் ஒரே நேரத்தில் ரெண்டர் செய்வது மெதுவாகவும் அதிக நினைவகத்தை உட்கொள்ளவும் கூடும். இதற்கான தீர்வு மெய்நிகராக்கம் (virtualization) அல்லது விண்டோயிங் (windowing) ஆகும். இந்த நுட்பம் தற்போது வியூபோர்ட்டில் தெரியும் உருப்படிகளின் சிறிய துணைக்குழுவை மட்டுமே ரெண்டர் செய்வதை உள்ளடக்கியது. பயனர் உருட்டும் போது, பழைய உருப்படிகள் அன்மவுண்ட் செய்யப்பட்டு, புதிய உருப்படிகள் மவுண்ட் செய்யப்படுகின்றன. `react-window` மற்றும் `react-virtualized` போன்ற லைப்ரரிகள் இந்த முறையை செயல்படுத்த சக்திவாய்ந்த மற்றும் பயன்படுத்த எளிதான காம்போனென்ட்களை வழங்குகின்றன.

முடிவுரை

ரியாக்ட்டின் செயல்திறன் ஒரு தற்செயல் நிகழ்வு அல்ல; இது மெய்நிகர் DOM மற்றும் ஒரு திறமையான மறுசீரமைப்பு அல்காரிதத்தை மையமாகக் கொண்ட ஒரு திட்டமிட்ட மற்றும் நுட்பமான கட்டமைப்பின் விளைவாகும். நேரடி DOM கையாளுதலை சுருக்கமாகக் கூறுவதன் மூலம், ரியாக்ட் புதுப்பிப்புகளைத் தொகுத்து மேம்படுத்த முடியும், இது கைமுறையாக நிர்வகிக்க நம்பமுடியாத அளவிற்கு சிக்கலானதாக இருக்கும்.

டெவலப்பர்களாக, நாம் இந்த செயல்முறையின் ஒரு முக்கிய பகுதியாக இருக்கிறோம். வேறுபாட்டைக் கண்டறியும் அல்காரிதத்தின் ஹியூரிஸ்டிக்ஸைப் புரிந்துகொள்வதன் மூலம்—கீகளைச் சரியாகப் பயன்படுத்துதல், காம்போனென்ட்கள் மற்றும் மதிப்புகளை மெமோயிஸ் செய்தல், மற்றும் நமது பயன்பாடுகளை சிந்தனையுடன் கட்டமைத்தல்—நாம் ரியாக்ட்டின் ரீகன்சைலருடன் இணைந்து வேலை செய்ய முடியும், அதற்கு எதிராக அல்ல. ஃபைபர் கட்டமைப்பிற்கான பரிணாமம் சாத்தியமானவற்றின் எல்லைகளை மேலும் தள்ளியுள்ளது, இது ஒரு புதிய தலைமுறை மென்மையான மற்றும் பதிலளிக்கக்கூடிய UI-களை செயல்படுத்துகிறது.

அடுத்த முறை ஒரு ஸ்டேட் மாற்றத்திற்குப் பிறகு உங்கள் UI உடனடியாகப் புதுப்பிக்கப்படுவதைக் காணும்போது, திரைக்குப் பின்னால் நடக்கும் மெய்நிகர் DOM, வேறுபாட்டைக் கண்டறியும் அல்காரிதம், மற்றும் கமிட் கட்டத்தின் நேர்த்தியான நடனத்தைப் பாராட்ட ஒரு கணம் எடுத்துக் கொள்ளுங்கள். இந்த புரிதல் உலகளாவிய பார்வையாளர்களுக்காக வேகமான, திறமையான, மற்றும் மேலும் வலுவான ரியாக்ட் பயன்பாடுகளை உருவாக்குவதற்கான உங்கள் திறவுகோலாகும்.